<template>
  <div>
	  <div>
      <div style="margin:2% 0;display: inline-block;">
        <span>用户id：</span>
        <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入用户id" v-model="userId"></el-input>
        <span>审核结果:</span>
        <el-select v-model="results" placeholder="请选择审核结果" style="width:150px;"  @change="selectTrigger(sort)">
          <el-option v-for="item in resultsOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <span>可接区服:</span>
        <el-select v-model="area" placeholder="请选择可接区服" style="width:150px;" @change="selectTrigger(sort)">
          <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="tableData.content"
		row-key="id">
	    <el-table-column
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	     </el-table-column>
	    <el-table-column
	  	 prop="userId"
	  	 label="用户ID">
	     </el-table-column>
      <el-table-column prop="dan" label="段位"/>
      <el-table-column prop="price" label="价格设定">
        <template slot-scope="scope">
          <span>{{scope.row.price ? scope.row.price : '未设置'}}元/每局</span>
        </template>
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span>{{scope.row.sex ? scope.row.sex == 1? '男': '女' : '未设置'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄">
        <template slot-scope="scope">
          <span>{{scope.row.age ? scope.row.age : '未设置'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="陪玩昵称"/>
      <el-table-column prop="headImg" label="头像" width="120">
        <template slot-scope="scope">
          <div v-if="scope.row.headImg == '' || scope.row.headImg == null">
            <img src="~@/assets/img/avatar.png" alt="" width="60" height="60">
          </div>
          <div v-else>
            <img :src="scope.row.headImg" alt="" width="60" height="60">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="gameType" label="游戏类型">
        <template slot-scope="scope">
          <span>{{scope.row.gameType ? scope.row.gameType == 1? '王者': '吃鸡' : '未设置'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="area" label="可接区服">
        <template slot-scope="scope">
          <span>{{scope.row.area}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="skill" label="擅长位置">
        <template slot-scope="scope">
          <span>{{scope.row.skill ? scope.row.skill : '未设置'}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column prop="photo" label="技能图片">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{scope.row.photo ? scope.row.photo : '未设置'}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="introduce" label="技能文字介绍"/>-->
<!--      <el-table-column prop="voice" label="技能语音介绍">-->
<!--        <template slot-scope="scope">-->
<!--          <audio-->
<!--            ref="audio"-->
<!--            :src="scope.row.voice"-->
<!--          ></audio>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="results" label="审核状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.results === 1 ? 'success' : scope.row.results == 0? 'info': 'primary'"
            disable-transitions>{{scope.row.results == 0? '未审核': scope.row.results == 1? '通过': '未通过' }}</el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column prop="reason" label="未通过理由"/>-->
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
	    <el-table-column
	      label="操作"
        align="center"
        fixed="right">
	      <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="updates(scope.row)">详情
          </el-button>
	      </template>
	    </el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="tableData.totalElements">
	    </el-pagination>
	  </div>
  </div>
</template>

<script>
	export default {
	    data() {
	      return {
				size:5,
				page:1,
        userId: null,
        results: null,
        area: null,
        resultsOptions: [
          {
            label: '未审核',
            value: 0
          },
          {
            label: '通过',
            value: 1
          },
          {
            label: '未通过',
            value: -1
          },
        ],
        areaOptions: [
          {
            label: '微信',
            value: 1
          },
          {
            label: 'qq',
            value: 2
          }
        ],
				tableDataLoading:false,
        tableData:{
          content: []
        },
			}
		},
		methods: {
      // select自动选择
      selectTrigger() {
        this.dataSelect()
      },
      // 查询
      select() {
        this.page = 1
        this.size = 5
        this.dataSelect()
      },
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
      // 详情跳转
      updates (row) {
        this.$router.push({path: '/playWithAuditDetail', query: {id: row.id}})
      },
      // 获取数据
      dataSelect () {
        let page = this.page - 1
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl2('/player/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page':page,
            'size':this.size,
            'results':this.results,
            'userId':this.userId,
            'area':this.area,
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          // console.log(data)
          this.tableData = data.data || {content: []};
        })
      }
		},
    mounted() {
      this.dataSelect()
    }
	  };
</script>

<style>

</style>
